import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';
import { ViewPort, TopResizable } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";

<CommonHeader />

<Meta title="Components/TopResizable" component={TopResizable} />

## TopResizable

Anchored resizable space on the top edge of it's parent.

### Specifying a % size

<Canvas>
	<Story name="Default (%)">
		<ViewPort>
			<TopResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Top resizable")}
			</TopResizable>
		</ViewPort>
	</Story>
</Canvas>

### Specifying a pixel size

<Canvas>
	<Story name="Default (px)">
		<ViewPort>
			<TopResizable style={green} size={300} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Top resizable")}
			</TopResizable>
		</ViewPort>
	</Story>
</Canvas>

### With resize constraints

<Canvas>
	<Story name="With resize constraints">
		<ViewPort>
			<TopResizable style={green} size={300} touchHandleSize={20} trackSize={true} minimumSize={150} maximumSize={450} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Top resizable")}
			</TopResizable>
		</ViewPort>
	</Story>
</Canvas>

### As a scrollable space

<Canvas>
	<Story name="Scrollable">
		<ViewPort>
			<TopResizable style={green} size={300} touchHandleSize={20} scrollable={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{lorem}
			</TopResizable>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<ResizableProps />
		<AnchoredProps />
		<StandardProps />
	</PropsTable>
</Story>